// 收费统计  申屠雅婷
<template>
  <div class="charge">
    <Detail />
    <Total
      @searchParent="searchParent"
      @searchParent1="searchParent1"
      @searchParent2="searchParent2"
    />
    <Table :arr="arr" @parentDialog="parentDialog" />
    <Pages />
    <Dialog v-if="isShow" :row="row" />
  </div>
</template>

<script>
import Detail from "./components/Detail.vue";
import Total from "./components/Total.vue";
import Table from "./components/Table.vue";
import Pages from "./components/Pages.vue";
import Dialog from "./components/Dialog.vue";
import { getCharge } from "../../api/charge";
export default {
  components: { Detail, Total, Table, Pages, Dialog },
  data() {
    return {
      arr: [],
      search: "",
      page: 1,
      pageSize: 10,
      isShow: false,
      row: "",
      type: "",
      // date: ""
      date1: "",
      date2: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    parentDialog(row) {
      this.row = row;
      this.isShow = true;

      // console.log(1111111);
    },
    searchParent2(val) {
      this.date = val;
      let dateData = this.date;
      if (dateData) {
        let date1 = Date.parse(dateData[0]); //初始时间
        let date2 = Date.parse(dateData[1]); //结束时间
        this.date1 = date1;
        this.date2 = date2;
      }
      this.getData();
    },
    searchParent1(val) {
      this.type = val;
      this.getData();
    },
    searchParent(val) {
      this.search = val;
      this.getData();
    },

    getData() {
      const sou = {
        search: this.search,
        type: this.type,
        page: this.page,
        pageSize: this.pageSize,
        date1: this.date1,
        date2: this.date2,
        // date: this.date
      };
      getCharge(sou).then((res) => {
        if (res.code == 200) {
          this.arr = res.data;
        }
      });
    },
  },
};
</script>

<style>
.charge {
  /* margin-left: 30px;
  margin-right: 30px; */
  background-color: #fff;
  padding-top: 14px;
  padding-left: 20px;
}
</style>